<template>
    <div class="app" id="app">
        <div class="app-wrapper openSidebar clearfix">
            <!-- 侧边菜单 -->
            <div class="sidebar-container">
                <div class="logo">
                    <img src="../../assets/images/login/login-logo.png" alt="" style="width: 100px; height: 100px" />
                </div>
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-menu :default-active="defAct" :unique-opened="false" :collapse-transition="false"
                        background-color="#343744" text-color="#bfcbd9" active-text-color="#f4f4f5" :router="true">
                        <div v-for="item in menuList" :key="item.id">
                            <el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
                                <template slot="title">
                                    <i class="iconfont" :class="item.icon"></i>
                                    <span>{{ item.name }}</span>
                                </template>
                                <el-menu-item v-for="sub in item.children" :index="sub.id" :key="sub.id"
                                    @click="menuHandle(sub, false)">
                                    <i :class="[iconfont, sub.icon]"></i>
                                    <span slot="title">{{ sub.name }}</span>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item v-else :index="item.id" @click="menuHandle(item, false)">
                                <i class="iconfont" :class="item.icon"></i>
                                <span slot="title">{{ item.name }}</span>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container">
                <div class="navbar">
                    <div class="head-lable">
                        <span v-if="goBackFlag" class="goBack" @click="goBack" style="float: inline-start;">
                            <img src="../../assets/images/icons/btn_back@2x.png" alt="" /> 返回
                        </span>
                        <span style="float: inline-start;">{{ headTitle }}</span>
                    </div>
                    <div class="right-menu">
                        <div class="avatar-wrapper">{{ userInfo.name }}</div>
                        <img src="../../assets/images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
                    </div>
                </div>

                <div class="app-main" v-loading="loading">
                    <div class="divTmp" v-show="loading"></div>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 导入你的 Vue 组件
import MemberListView from "../member/ListView.vue";
import CategoryListView from "../category/ListView.vue";
import ModelListView from "../model/ListView.vue";
import CompanyListView from "../company/ListView.vue";
import AnalyticsListView from "../analytics/ListView.vue";
import router from '@/router';
import { logoutApi } from "../../api/login.js"

Vue.use(ElementUI);

export default {
    data() {
        return {
            defAct: "/member/list",
            menuActived: "1",
            userInfo: {},
            menuList: [
                {
                    id: "/member/list",
                    name: "员工管理",
                    icon: "icon iconfont icon-customer",
                    index: "1",
                },
                {
                    id: "/category/list",
                    name: "分类管理",
                    icon: "icon iconfont icon-discount",
                    index: "2",
                },
                {
                    id: "/model/list",
                    name: "模型管理",
                    icon: "icon iconfont icon-product-list",
                    index: "3",
                },
                {
                    id: "/company/list",
                    name: "公司管理",
                    icon: "icon iconfont icon-company",
                    index: "4",
                },
                {
                    id: "/analytics/list",
                    name: "用户数据",
                    icon: "icon iconfont icon-suggest",
                    index: "5",
                },
            ],
            headTitle: "员工管理",
            goBackFlag: false,
            loading: true,
            timer: null,
            position: "employee"
        };
    },
    watch: {
        '$route'(to, from) {
            this.handleRouteChange();
        },
    },
    computed: {},
    created() {
        const userInfo = window.localStorage.getItem("userInfo");
        if (userInfo) {
            this.userInfo = JSON.parse(userInfo);
        }
        console.log("position:" + this.userInfo.position)
        if (this.userInfo.position === "exhibitor") {
            this.position = "exhibitor";

            // 修改 menuList 数组中的数据
            this.menuList[0].id = "/exhibition/list";
            this.menuList[0].name = "展厅管理";
            this.menuList[0].icon = "icon iconfont icon-store";
            this.headTitle = "展厅管理";
            this.defAct = "/exhibition/list";

            // 使用 Vue Router 进行重定向
            this.$router.replace('/exhibition/list');
        } else if (this.userInfo.position === "manager") {
            this.position = "manager";

            // 使用 Vue Router 进行重定向
            this.$router.replace('/member/list');
        }
        else if (this.userInfo.position === "employee") {
            this.position = "employee";
            // 去除 menuList 数组的最后一个元素
            this.menuList.splice(-1, 1);
            // 使用 Vue Router 进行重定向
            this.$router.replace('/member/list');
        }

        this.closeLoading();
    },
    beforeDestroy() {
        this.timer = null;
        clearTimeout(this.timer);
    },
    mounted() {
        window.menuHandle = this.menuHandle;
    },
    methods: {
        handleRouteChange() {
            let routerPath = this.$route.path;
            console.log("routerPath:" + routerPath);
            var parts = routerPath.split('/');

            // 获取第二个斜杠后面的内容
            var result = parts.length >= 3 ? parts[2] : null;
            console.log("result:" + result);

            if (result === "list") {
                const menu = this.menuList.find((item) => item.id === routerPath);
                console.log("menu:" + menu);
                this.menuHandle(menu, false);
            }
        },
        logout() {
            logoutApi().then((res) => {
                if (res.code === 1) {
                    localStorage.removeItem('userInfo')
                    router.replace({ name: 'login' });
                }
            })
        },
        goBack() {
            this.$router.back();
            console.log("this.menuActived:" + this.menuActived)
            const menu = this.menuList.find((item) => item.index === this.menuActived);
            console.log("menu:" + menu)
            this.menuHandle(menu, false);
        },

        menuHandle(item, goBackFlag) {
            this.loading = true
            this.menuActived = item.index
            this.component = item.component
            this.headTitle = item.name
            this.goBackFlag = goBackFlag

            this.closeLoading()
        },

        closeLoading() {
            this.timer = null;
            this.timer = setTimeout(() => {
                this.loading = false;
            }, 600);
        },
    },
};
</script>